<template>
  <div class="svg-icons">
    <div class="icon" v-for="svg of svgs" :key="svg" v-copy>
      <SvgIcon :iconClass="svg" :width="'25px'" :height="'25px'"></SvgIcon>
      <span class="text">{{ svg }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import svgs from '@/assets/icons/index'
</script>
<style lang="scss" scoped>
.svg-icons {
  max-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  display: -webkit-flex; /* Safari */
  .icon {
    width: 150px;
    height: 100px;
    cursor: pointer;
    border: 1px solid #e5e9f2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
  }
  .icon:hover {
    background-color: #d3dce6;
  }
}
</style>
